﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mr. hurley | personal blog</title>
	<link href="mainsite/style.css" rel="stylesheet" type="text/css" media="screen" />
	<script src="mainsite/modernizr-1.1.min.js"></script>
	<style type="text/css">
		#movies
		{
		    width:100%;
		    text-align:center;
		}
		#movieContent
		{
		  border-spacing: 20px;
		  margin-left:auto;
		  margin-right:auto;
		  text-align:left;
		}
	
		#movieContent tr td {
		width: 385px;
		min-height: 130px;
		background: rgb(255,255,255); /*rgba ie fix*/
		background: rgba(255,255,255,0.75);
		border: 1px solid rgb(255,255,255); /*rgba ie fix*/
		-moz-border-radius: 10px;				
		-khtml-border-radius: 10px;				
		-webkit-border-radius: 10px;	
		border-radius: 10px;	
		-moz-box-shadow: 0px 0px 5px #c6c6bf;				
		-khtml-box-shadow: 0px 0px 5px #c6c6bf;				
		-webkit-box-shadow: 0px 0px 5px #c6c6bf;
		box-shadow: 0px 0px 5px #c6c6bf;			
		margin: 30px 15px 20px 15px;
		padding: 15px;
		cursor: pointer;
		 background-color: #f6f6ee;
	}
	
	#movieContent tr td:hover {
		background: rgb(255,255,255); /*rgba ie fix*/
	}
	
	#movieContent h2 {
		font-size: 16px;
		line-height: 22px;
		margin: 0 0 10px 0;
	}
	#movieContent span {
		font-size: 12px;
		font-weight: bold;
	}
	#slogan
	{
		font-size: 16px;
		font-weight: bold;
		font-style: oblique;
		/*font-family:Tahoma,Verdana;
		text-align: center;*/
		margin-left: 10px;
	}
	#logo_image
	{
		margin-left: 10px;
		padding-top: 10px;
		/*margin: 10px 0 0 10px;*/
	}
	#nav_block ul
	{
	    display: inline;
	    margin:0;
		padding: 0;
		zoom: 1;
		float: right;
	}
	#nav_block ul li
	{
	    float: left;
	    font-size: 14px;
	}
	#nav_block a
	{
	    display:inline-block;
		padding:10px;
		color: White;
	}
	#nav_block a:hover
	{
	    color: #F8F85F;
	}
	.push {
			height: 4em;
			clear: both;
		}
		
	#main_center {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
		width: 960px;
		background-color: White;
	}
	#main_left
	{
		float: left;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
	}
	#main_right
	{
		float: left;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
	}
	
	#nav_block
	{
	    /*style="background-color: #3c3c3c;  height: 30px; width: 960px; "*/
	
	background: #3c3c3c url(mainsite/images/bck_head.jpg);
	-moz-box-shadow: inset 0px -2px 3px #480508;
	-khtml-box-shadow: inset 0px -2px 3px #480508;				
	-webkit-box-shadow: inset 0px -2px 3px #480508;
	box-shadow: inset 0px -2px 3px #480508;
	border-bottom: 1px solid #fffffb;
	/*height: 70px;*/
	height: 70px;
	width: 960px;
	display: block;
	margin: 0 auto;
}
	</style>
</head>
<body>
		<div id="main_left">&nbsp;</div>
		<div id="main_center">
	
	<header><!--useful to create the 960px limit-->

		<div id="logo_block" style="background-color: White; height: 140px; width: 960px; margin: 0 auto;">
			<div id="logo_image">
				<a href="/" ><img src="mainsite/images/Logo_Medium.png" alt="I Pick Movies" style="height: 120; width: 240" /> </a>			
			</div>
			<div id="slogan">
				Why? Let us pick them for you...
			</div>
		</div>
		<div id="nav_block" >
			<ul style="display: inline">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Settings</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Register/Login</a></li>
			</ul>
		</div>
		<div id="command_block" style="width:960px; margin: 10px auto; background-color: white">
			<span style="float: left; width: 700px; margin-left: 50px;">
				<ul style="list-style: none; float: left">
					<li style="margin: 0px 5px; display: inline"><a href="facebook.com/mezanmitech"><img src="Images/socialmedia/facebook_circular.png" alt="facebook page" /></a></li>
					<li style="margin: 0px 5px; display: inline"><a href="twitter.com/mezanmitech"><img src="Images/socialmedia/twitter_circular.png" alt="twitter page" /></a></li>
				</ul>
			</span>
			<ul style="list-style: none; float: right; margin-right: 50px;">
				<li style="margin: 0px 5px; display: inline"><a href="facebook.com/mezanmitech"><img src="Images/socialmedia/facebook_circular.png" alt="facebook page" /></a></li>
				<li style="margin: 0px 5px; display: inline"><a href="twitter.com/mezanmitech"><img src="Images/socialmedia/twitter_circular.png" alt="twitter page" /></a></li>
			</ul>
		</div>
	</header>
	
	<div id="main_content">
		<div id="movies">
		<table id="movieContent">
			<tr>
				<td id="Td1">
				<article>
				<figure class="float">
				<img src="mainsite/images/test3.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">The Man in the Iron Mask</a></h2>
				</header>
				<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
				<footer>
				<p><span>Release Year:</span><time datetime="1998" reldate>1998</time></p>
				<p><span>Rated:</span> PG-13</p>
				<p><span>Viewer Rating:</span> 6</p>
				</footer>
			</article>
				</td>
					<td id="Td2">
				<article>
				<figure class="float">
				<img src="mainsite/images/test3.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">The Man in the Iron Mask</a></h2>
				</header>
				<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
				<footer>
				<p><span>Release Year:</span><time datetime="1998" reldate>1998</time></p>
				<p><span>Rated:</span> PG-13</p>
				<p><span>Viewer Rating:</span> 6</p>
				</footer>
			</article>
				</td>
			</tr>
			<tr>
				<td id="single_movie">
				<article>
				<figure class="float">
				<img src="mainsite/images/test3.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">The Man in the Iron Mask</a></h2>
				</header>
				<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
				<footer>
				<p><span>Release Year:</span><time datetime="1998" reldate>1998</time></p>
				<p><span>Rated:</span> PG-13</p>
				<p><span>Viewer Rating:</span> 6</p>
				</footer>
			</article>
				</td>
					<td id="single_movie">
				<article>
				<figure class="float">
				<img src="mainsite/images/test3.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">The Man in the Iron Mask</a></h2>
				</header>
				<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
				<footer>
				<p><span>Release Year:</span><time datetime="1998" reldate>1998</time></p>
				<p><span>Rated:</span> PG-13</p>
				<p><span>Viewer Rating:</span> 6</p>
				</footer>
			</article>
				</td>
			</tr>
		</table>
		</div>
		<div class="push"></div>
		<!-- movie divs -->
		</div>


		<footer class="bottom">
			<p>
				&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="">Terms of Use</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="">Privacy Policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="">Share</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="">Contact Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			</p>
			<p>Credits: Powered by <strong>NETFLIX.</strong></p>
			<p>Copyright IPickMovies.com (c) 2012</p>
		</footer>
</div>
		<div id="main_right">&nbsp;</div>
	
</body>
</html>
